.sign {
    &-title {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: var(--normal-font-size);
        width: 100%;
        padding-left: 2vmin;
        height: 11.5vmin;
        color: var(--text-color);
    }

    ul {
        border-radius: 3vmin;
        background-color: #ffffff;

        li {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 12vmin;
        }
    }

    .timeline {
        width: 100%;
        padding: 2vmin 3vmin 0 3vmin;

        &-list {
            display: flex;
            justify-content: space-evenly;

            &-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                width: 10vmin;
                height: 12vmin;

                span {
                    font-size: var(--mini-font-size);
                    padding-right: 1vmin;
                    color: #1d1d1f;
                }

                &-icon {
                    display: flex;
                    align-items: center;
                    width: 6vmin;
                    height: 6vmin;

                    img {
                        width: 100%;
                    }
                }

                &:first-child {
                    span {
                        color: #1d1d1f !important;
                    }
                }

                &:last-child {
                    span {
                        color: #ec3763;
                        font-weight: bold;
                    }
                }

                &:nth-child(odd) {
                    span {
                        color: var(--task-color);
                    }
                }
            }
        }

        &_line {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            width: 100%;
            height: 2.5vmin;
            background-color: var(--timeline-bg-color);
            border-radius: 2vmin;
            margin-top: 1.5vmin;

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                background-color: var(--task-color);
                width: var(--width);
                height: 100%;
                border-radius: 999px;
                transition: width 300ms ease-in-out;
            }

            &__dot {
                position: relative;
                width: 10vmin;
                height: 100%;

                &::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    --size: 2vmin;
                    width: var(--size);
                    height: var(--size);
                    border-radius: 100%;
                    background-color: #ffffff;
                }
            }
        }

        &_date {
            display: flex;
            justify-content: space-evenly;

            span {
                display: block;
                width: 10vmin;
                text-align: center;
                margin-top: 2vmin;
                font-size: var(--mini-font-size);
                color: #a6a6a6;
            }
        }
    }

    .sign-button {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        height: 7vmin;
        width: 40%;
        margin: 2vmin 0;
        border-radius: 6vmin;
        background-image: linear-gradient(to bottom, #F68892, #FF5881);
        overflow: hidden;

        span {
            font-size: var(--small-font-size);
            font-weight: bold;
            color: #fff;
            line-height: 1;
        }

        &.click-ad {
            &::before {
                @extend %adcorner;
                top: 0;
                right: 0;
                transform: scale(0.7);
            }
        }
    }
}